<style>
    .layui-input-block.layuimini-upload-show {
        margin-left: 0 !important;
    }
</style>
<div class="layuimini-container">
    <div class="layuimini-main" id="app" v-cloak="">

        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
            <ul class="layui-tab-title">
                <li v-for="(item,key) in configTabList" :key="item.id" :class="key==0 ? 'layui-this' : ''" @click="topTabChange(key)">
                    {{ item.label }}
                </li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab">
                    <ul class="layui-tab-title">
                        <li v-for="(item,key) in configTabList[topTabIndex]&&configTabList[topTabIndex].children"
                            :lay-id="item.id" :class="key==0 ? 'layui-this' : ''" :key="item.id" @click="configTabChange(item.id)">
                            {{ item.label }}
                        </li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show ">
                            <form id="app-form" class="layui-form layuimini-form" style="width:70%;">
                                <div class="layui-form-item" v-for="(item,val) in configList" :key="item.id">
                                    <label class="layui-form-label">{{ item.info }}</label>
                                    <div :class="{'layui-input-block': true, 'layuimini-upload': ['frame','upload'].includes(item.type)}">
                                        <template v-if="item.type == 'radio'">
                                            <template v-for="(radioItem,key) in item.options">
                                                <input type="radio" :name="item.menu_name"
                                                       :title="radioItem.label" :value="radioItem.value" :checked="radioItem.value == item.value">
                                            </template>
                                        </template>
                                        <template v-else-if="item.type == 'checkbox'">
                                            <template v-for="(radioItem,key) in item.options">
                                                <input type="checkbox" :name="item.menu_name"
                                                       :title="radioItem.label" :value="radioItem.value" :checked="radioItem.value === item.value">
                                            </template>
                                        </template>
                                        <template v-else-if="item.type == 'frame' || item.type == 'upload'">
                                            <div style="display: flex; width: 100%; justify-content: space-between">
                                                <input :name="item.menu_name" class="layui-input layui-col-xs6" :placeholder="'请上传' + item.info" :value="item.value">
                                                <div class="layuimini-upload-btn">
                                                    <span v-if="item.type == 'frame'">
                                                        <a class="layui-btn" :data-upload="item.menu_name" data-upload-sign=","
                                                           :data-upload-number="item.upload_type == 2 ? 'many' : 'one'" data-upload-exts="ico|png|jpg|jpeg">
                                                            <i class="fa fa-upload"></i> 上传
                                                        </a>
                                                    </span>
                                                    <span>
                                                        <a class="layui-btn layui-btn-normal" :id="'select_' + item.menu_name +'_image'" data-upload-sign=","
                                                           :data-upload-select="item.menu_name" :data-upload-number="item.upload_type == 2 ? 'many' : 'one'">
                                                        <i class="fa fa-list"></i> 选择</a>
                                                    </span>
                                                </div>
                                            </div>
                                            <ul :id="'bing-' + item.menu_name" class="layuimini-upload-show" style=""
                                                v-if="item.value !== '' && [1,2].includes(item.upload_type)">
                                                <template v-if="item.upload_type == 2">
                                                    <li v-for="(uploadValue, key) in item.value" style="margin-right: 10px;">
                                                        <a>
                                                            <img :src="uploadValue" data-image=""
                                                                 onerror="this.style.display='none';this.onerror=null">
                                                        </a>
                                                        <small class="uploads-delete-tip bg-red badge" :data-upload-delete="item.menu_name"
                                                               :data-upload-url="uploadValue" data-upload-sign=",">
                                                            ×
                                                        </small>
                                                    </li>
                                                </template>
                                                <template v-else>
                                                    <li>
                                                        <a>
                                                            <img :src="item.value" data-image=""
                                                                 onerror="this.style.display='none';this.onerror=null">
                                                        </a>
                                                        <small class="uploads-delete-tip bg-red badge" :data-upload-delete="item.menu_name"
                                                               :data-upload-url="item.value" data-upload-sign=",">
                                                            ×
                                                        </small>
                                                    </li>
                                                </template>
                                            </ul>
                                        </template>
                                        <template v-else-if="item.type == 'textarea'">
                                            <textarea :name="item.menu_name" class="layui-textarea">{{ item.value }}</textarea>
                                        </template>
                                        <template v-else>

                                            <input :type="item.type == 'date' ? (item.date_type == 'datetime' ? 'datetime-local' : item.date_type) : item.type"
                                                   :name="item.menu_name" class="layui-input"
                                                   :placeholder="item.desc ? item.desc : ('请输入' + item.info)" :value="item.value">
                                        </template>
                                        <tip v-if="item.desc" style="display: block;margin-top: 10px;">
                                            <span style="color:red;">*</span>
                                            {{ item.desc }}
                                        </tip>
                                    </div>
                                </div>
                                <div class="hr-line"></div>
                                <div class="layui-form-item text-center" v-show="loading">
                                    <button type="submit" class="layui-btn layui-btn-normal layui-btn-lg" lay-submit="setting.SystemConfig/saveBasics" data-refresh="false">
                                        确认
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>